<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频 - 22001010819 郑力</title>
    <link rel="stylesheet" href="zhengli.css">
    <link rel="stylesheet" href="./fonts/font_4714490_gx5miy8jpuq/iconfont.css">
</head>
<body class="zheng_video_page">
    <!-- 头部导航 -->
    <header class="zheng_header">
        <div class="zheng_search_icon">
            <i class="iconfont icon-search"></i>
        </div>
        <nav class="zheng_nav_list">
            <a href="#" class="zheng_nav_item">关注</a>
            <a href="#" class="zheng_nav_item">精选</a>
            <a href="#" class="zheng_nav_item active">推荐</a>
            <a href="#" class="zheng_nav_item">放映厅</a>
        </nav>
        <div class="zheng_add_btn">
            <i class="iconfont icon-add"></i>
        </div>
    </header>

    <!-- 视频内容 -->
    <main class="zheng_main">
        <div class="zheng_video_wrapper">
            <!-- 视频播放区域 -->
            <div class="zheng_video_player">
                <video src="./images/shipin.mp4" autoplay loop muted playsinline></video>
            </div>

            <!-- 右侧互动按钮 -->
            <div class="zheng_interaction">
                <div class="zheng_avatar">
                    <img src="./images/头像.jpg" alt="头像">
                </div>
                <div class="zheng_action_btn">
                    <i class="iconfont icon-fabu"></i>
                    <span>386</span>
                </div>
                <div class="zheng_action_btn">
                    <span>59</span>
                </div>
            </div>

            <!-- 底部信息 -->
            <div class="zheng_video_info">
                <div class="zheng_author">@粉红星语</div>
                <div class="zheng_title">大连最有烟火气早市</div>
                <div class="zheng_time">2024-11-16 15:07 · 来自抖音</div>
                <div class="zheng_topic">
                    <i class="iconfont icon-add"></i>
                    <span>大连早市有哪些特色美食</span>
                    <i class="iconfont icon-arrow"></i>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer class="zheng_footer">
        <nav class="zheng_bottom_nav">
            <a href="index.html" class="zheng_nav_item">
                <i class="iconfont icon-toutiao"></i>
                <span>头条</span>
            </a>
            <a href="video.html" class="zheng_nav_item active">
                <i class="iconfont icon-shipin"></i>
                <span>视频</span>
            </a>
            <a href="task.html" class="zheng_nav_item">
                <i class="iconfont icon-daibanrenwu"></i>
                <span>任务</span>
            </a>
            <a href="shop.html" class="zheng_nav_item">
                <i class="iconfont icon-shangcheng"></i>
                <span>商城</span>
            </a>
            <a href="mine.html" class="zheng_nav_item">
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </a>
        </nav>
    </footer>

    <script>
        // 视频自动播放和循环
        document.querySelector('video').play();
        
        // 点击视频区域暂停/播放
        document.querySelector('.zheng_video_player').addEventListener('click', function() {
            const video = this.querySelector('video');
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        });
    </script>
</body>
</html> 